<template>
	<div class="pie_chart" :id="idName">饼形图</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, toRefs, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
var chartDom = document.getElementById(idName.value);
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

option && myChart.setOption(option);
let router = useRouter();
const props = defineProps({
  idName: {
    type: String,
    default: "barChart",
  },
  title: {
		type: String,
		default: "XXX饼状图"
	},
	list: {
		type: Array,
		required: true
	},
	type: {
		type: String,
		default: "参数"
	},
});
let { idName, title, list, type } = toRefs(props);
// let option=ref({
// 	title: {
// 		text: "上传商品分类数比",
// 		left: "center",
// 	},
// 	tooltip: {
// 		trigger: "item",
// 		formatter: '{a} <br/>{b} : {c} ({d}%)'
// 	},
// 	legend: {
// 		orient: "vertical",
// 		left: "left",
// 	},
// 	series: [{
// 		name: "",
// 		type: "pie",
// 		radius: "50%",
// 		data: [],
// 		emphasis: {
// 			itemStyle: {
// 				shadowBlur: 10,
// 				shadowOffsetX: 0,
// 				shadowColor: "rgba(0, 0, 0, 0.5)",
// 			},
// 		},
// 	}],
// })
// const series = computed(() => {
// 	let listObj = vm.value.names;
// 	let values = vm.value.values;
// 	let seriesobj = [];
// 	let labelOption = {
// 		show: true,
// 		position: "insideBottom",
// 		distance: 15,
// 		align: 'left',
// 		verticalAlign: 'middle',
// 		rotate: 90,
// 		formatter: '{c}  {name|{a}}',
// 		fontSize: 16,
// 		rich: {
// 			name: {}
// 		}
// 	};
// 	for (let i=0;i<listObj.length;i++){
// 		let data = []
// 		for (let j=0;j<values.length;j++){
// 			data.push(values[j][i]);
// 		}
// 		let dict_type = {
// 				name: listObj[i],
// 				type: 'bar',
// 				barGap: 0,
// 				label: labelOption,
// 				emphasis: {
// 					focus: 'series'
// 				},
// 				data: data
// 		}
// 		seriesobj.push(dict_type);
// 	}
// 	return seriesobj;
// });
// let init_chart = () => {
// 	let optionObj = option.value;
// 	let typeObj = type.value;
// 	let titleObj = title.value;
// 	if (titleObj) {
// 		optionObj.title.text = titleObj;
// 	}

// 	// 分类名
// 	if (typeObj) {
// 		optionObj.series[0].name = typeObj;
// 	}

// 	// 参数
// 	optionObj.series[0].data = list.value;
// 	let myChart = echarts.init(document.getElementById(idName.value));
// 	myChart.setOption(optionObj);
// };
// watch(list, (newValue, oldValue) => {
//   if (newValue) {
//     init_chart();
//   }
// });
// onMounted(() => {
// 	setTimeout(()=>{
// 	 init_chart();
// 	},200)

// });
</script>

